import React from "react";
import styles from "./index.less";
import { Button, Icon, Timeline, Input, DatePicker } from "antd";
import { relative } from "path";
import { formatDate } from "utils";
import moment from "moment";

const { TextArea } = Input;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
let startTime = ''
let endTime = ''
export default class sliderDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opinion: ""
    };
  }
  onClose = () => {
    $("#sliderDetails").animate({ right: "-500" });
    $("#text1").val();
  };
  textareaChange = e => {
    // console.log(e.target.value)
    this.setState({ opinion: e.target.value });
  };
  onChange = (date, dateString) => {
    if (date && dateString) {
      startTime = dateString[0];
      endTime = dateString[1];
    }
  };
  agree = () => {
    const { onCheckOk, sliderData, currentItem, onAgree,workflowList } = this.props;
    const params = {
      borrowStartAt: `${startTime != "" ? startTime : formatDate(sliderData.borrowStartTime)} 00:00:00`,
      borrowEndAt: `${endTime != "" ? endTime : formatDate(sliderData.borrowEndTime)} 00:00:00`,
      borrowAuditOpinion: this.state.opinion,
      documentId: currentItem.documentId,
      id: currentItem.id,

      borrowState:1,
      taskId:workflowList[workflowList.length-1].taskId,
      outcome:"同意",
      type: 0
    };
    // console.log(params)
    onAgree(params);
    $("#sliderDetails").animate({ right: "-500" });
  };
  disagree = () => {
    const { onCheckOk, sliderData, currentItem, onDisAgree,workflowList } = this.props;
    const params = {
      borrowStartAt: `${startTime != "" ? startTime : formatDate(sliderData.borrowStartTime)} 00:00:00`,
      borrowEndAt: `${endTime != "" ? endTime : formatDate(sliderData.borrowEndTime)} 00:00:00`,
      borrowAuditOpinion: this.state.opinion,
      documentId: currentItem.documentId,
      id: currentItem.id,

      borrowState:2,
      taskId:workflowList[workflowList.length-1].taskId,
      outcome:"拒绝",
      type: 0
    };
    // console.log(params)
    onDisAgree(params);
    $("#sliderDetails").animate({ right: "-500" });
  };
  render() {
    const { sliderData, menu, workflowList } = this.props;
    // console.log(sliderData)
    // console.log(workflowList)
    // console.log(formatDate(sliderData.borrowStartTime))
    // console.log(moment('2015-06-06', dateFormat))
    // console.log(moment(formatDate(sliderData.borrowStartTime?sliderData.borrowStartTime:""), dateFormat))
    // console.log(moment(formatDate(12345678987654), dateFormat))
    // console.log(sliderData.borrowStartTime?sliderData.borrowStartTime:"")
    const workflows = []
    const buttonList = []
    if (workflowList) {
      workflowList.map((item, i) => {
        // console.log(item)
        workflows.push(
          <Timeline.Item
            dot={
              item.outcome == '' ?
              <Icon
                type="clock-circle"
                style={{ fontSize: "16px", color: "#c4c4c4" }}
              />:
              item.outcome == '同意' ?
              <Icon
                type="check-circle"
                style={{ fontSize: "16px", color: "#4ebf86" }}
              />:
              <Icon
                type="close-circle"
                style={{ fontSize: "16px", color: "#e04c4f" }}
              />
              
            }
          >
            <div className={styles.timelineStep}>
              <div
                style={{ display: "flex", justifyContent: "space-between" }}
              >
                <span style={{ fontSize: 14, fontWeight: 500 }}>
                  <Icon type="user" />{item.activityName}
                </span>
                {item.outcome == '同意' ?
                  <span style={{ color: "#4ebf86", fontSize: 16 }}>
                    审批通过
                      </span> : item.outcome == '拒绝' ?
                    <span style={{ color: "#e04c4f", fontSize: 16 }}>
                      审批拒绝
                    </span> :
                    <span style={{ color: "#c4c4c4", fontSize: 16 }}>
                      等待审批
                  </span>
                }

              </div>
              <div style={{ marginLeft: 20 }}>
                <span>{item.endTime}</span>
                <span style={{ marginLeft: 10 }}>{item.assigneeName}</span>
              </div>
              {item.info ?
                <div style={{ paddingTop: 10, borderTop: "1px solid #e5e5e5", marginTop: 10, marginLeft: 20 }}><p style={{ color: "#999999" }}>{item.info}</p></div> :
                ""
              }

            </div>
          </Timeline.Item>
        )
      })
    }
    if (workflowList) {
      // console.log(workflowList[workflowList.length - 1])
      const datas = workflowList[workflowList.length - 1]
      var data = datas.data
      var data1 = JSON.parse(data)
      if(data1.length > 1){
        data1.map((item, i) => {
          // console.log(item)
          buttonList.push(
            <li style={{ width: "50%" }}>
              {item == '同意' ?
                <Button type="primary" onClick={this.agree}>
                  {item}
                </Button> :
                <Button onClick={this.disagree}>
                  {item}
                </Button>
              }
  
            </li>
          )
        })
      }
    }
    return (
      <div
        id="sliderDetails"
        className={styles.sidePanel}
      >
        <div
          style={{ position: "relative", minHeight: "100%", height: "auto" }}
        >
          <div className={styles.articleHeader}>
            <h2 style={{ fontSize:16,color:"rgba(61,61,61,1)",fontWeight:600,width:350,textAlign: "center",textOverflow: "ellipsis",whiteSpace: "nowrap",overflow:"hidden" }}>
              {sliderData.borrowUserName}的借阅申请
            </h2>
            <Button shape="circle" icon="close" onClick={this.onClose} />
          </div>

          <div style={{ padding: "10px 0", margin:"0 20px", borderBottom: "1px dashed #ddd", textAlign: "center" }}>

            {sliderData.borrowResult == 0 ?
              <img
                style={{ borderRadius: "50%",width:60 }}
                src={require("../../../../assets/checking.png")}
              /> :
              sliderData.borrowResult == 1 ?
                <img
                  style={{ borderRadius: "50%",width:60 }}
                  src={require("../../../../assets/pass.png")}
                /> :
                <img
                  style={{ borderRadius: "50%",width:60 }}
                  src={require("../../../../assets/refuse.png")}
                />
            }
            {sliderData.borrowResult == 0 ?
              <p style={{ fontSize: 16, color: "#1f90e6" }}>未审批，请尽快审批！</p> :
              sliderData.borrowResult == 1 ?
                <p style={{ fontSize: 16, color: "#4ebf86" }}>申请已通过</p> :
                <p style={{ fontSize: 16, color: "#e04c4f" }}>申请已拒绝</p>
            }


          </div>

          <div id="applyContent" className={styles.sideBody}>
            <div style={{ padding: "10px 0", borderBottom: "1px dashed #ddd" }}>
              <p>
                <span style={{ color: "#888" }}>档案年度:</span>
                {sliderData.documentYear}
              </p>
              <p>
                <span style={{ color: "#888" }}>公证事项:</span>
                {sliderData.notarialMatters}
              </p>
              <p>
                <span style={{ color: "#888" }}>借阅发起人:</span>
                {sliderData.borrowUserName}
              </p>
              <p>
                <span style={{ color: "#888" }}>借阅方式:</span>
                {sliderData.borrowMediumType == 0 ? "电子档案" : "纸质档案"}
              </p>
              <p>
                <span style={{ color: "#888" }}>申请提交日期:</span>
                {formatDate(sliderData.borrowApplyTime)}
              </p>
              <p>
                <span style={{ color: "#888" }}>借阅原因:</span>
                {sliderData.borrowReason}
              </p>
              <p>
                <span style={{ color: "#888" }}>联系方式:</span>
                {sliderData.contactWay}
              </p>
            </div>




            <p style={{fontSize:16,fontWeight:600}}>审核进度</p>
            <Timeline style={{ marginTop: 10 }}>
              {/* <Timeline.Item
                dot={
                  <Icon
                    type="check-circle"
                    style={{ fontSize: "16px", color: "#4ebf86" }}
                  />
                }
              >
                <div className={styles.timelineStep}>
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span style={{ fontSize: 14, fontWeight: 500 }}>
                      <Icon type="user" />一级审批:部门副主任
                    </span>
                    <span style={{ color: "#4ebf86", fontSize: 16 }}>
                      审批通过
                    </span>
                  </div>
                  <div style={{ marginLeft: 20 }}>
                    <span>2018-06-10 14:00:00</span>
                    <span style={{ marginLeft: 10 }}>李小花</span>
                  </div>
                  <div style={{ paddingTop: 10, borderTop: "1px solid #e5e5e5", marginTop: 10, marginLeft: 20 }}><p style={{ color: "#999999" }}>请处领导传阅</p></div>
                </div>
              </Timeline.Item>
              <Timeline.Item
                dot={
                  <Icon
                    type="close-circle"
                    style={{ fontSize: "16px", color: "#e04c4f" }}
                  />
                }
              >
                <div className={styles.timelineStep}>
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span style={{ fontSize: 14, fontWeight: 500 }}>
                      <Icon type="user" />一级审批:部门副主任
                    </span>
                    <span style={{ color: "#e04c4f", fontSize: 16 }}>
                      审批拒绝
                    </span>
                  </div>
                  <div style={{ marginLeft: 20 }}>
                    <span>2018-06-10 14:00:00</span>
                    <span style={{ marginLeft: 10 }}>李小花</span>
                  </div>
                </div>
              </Timeline.Item>
              <Timeline.Item
                dot={
                  <Icon
                    type="clock-circle"
                    style={{ fontSize: "16px", color: "#c4c4c4" }}
                  />
                }
              >
                <div className={styles.timelineStep}>
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span style={{ fontSize: 14, fontWeight: 500 }}>
                      <Icon type="user" />一级审批:部门副主任
                    </span>
                    <span style={{ color: "#c4c4c4", fontSize: 16 }}>
                      等待审批
                    </span>
                  </div>
                  <div style={{ marginLeft: 20 }}>
                    <span>2018-06-10 14:00:00</span>
                    <span style={{ marginLeft: 10 }}>李小花</span>
                  </div>
                </div>
              </Timeline.Item> */}
              {workflows}
            </Timeline>






            <div style={{ textAlign: "center" }}>
              {sliderData.borrowStartTime || sliderData.borrowEndTime ?
                <div style={{paddingLeft:20}}>
                  <span>借阅时间：</span>
                  <RangePicker style={{marginLeft:20}} disabled={menu == 2 ? false : true} defaultValue={[moment(formatDate(sliderData.borrowStartTime), dateFormat), moment(formatDate(sliderData.borrowEndTime), dateFormat)]} onChange={this.onChange} />
                </div>:
                ""
              }

            </div>

            {menu == 2 ? (
              <div style={{ padding: "10px 0 40px 20px" }}>
                <TextArea
                  id="text1"
                  defaultValue={this.state.opinion}
                  onChange={this.textareaChange}
                  placeholder="请输入审批意见"
                  rows={4}
                />
              </div>
            ) : (
                ""
              )}
          </div>

          {menu == 2 ? (
            <div className={styles.sideBottom}>
              <ul>
                {buttonList}
                {/* <li style={{ width: "50%" }}>

                  <Button type="primary" onClick={this.agree}>
                    通过
                  </Button>
                </li>
                <li style={{ width: "50%" }}>
                  <Button type="primary" onClick={this.disagree}>
                    拒绝
                  </Button>
                </li> */}
              </ul>
            </div>
          ) : (
              ""
            )}
        </div>
      </div>
    );
  }
}
